<template>
  <span class="caret-wrapper">
    <i
      @click="handleSort(0)"
      :class="
        props.sortTablekey == props.type && isDesc === 0 ? 'active-bottom' : ''
      "
      class="sort-caret ascending"
    ></i>
    <i
      :class="
        props.sortTablekey == props.type && isDesc === 1 ? 'active-top' : ''
      "
      @click="handleSort(1)"
      class="sort-caret descending"
    ></i>
  </span>
</template>

<script setup lang="ts">
const props = defineProps({
  handleSearch: { type: Function },
  searchParams: { type: Object },
  type: {
    type: Number,
    default: 1,
  },
  sortTablekey: {
    type: Number,
    default: 1,
  },
  key: {
    type: String,
    default: '',
  },
})
const isDesc = ref(-1)
const handleSort = (e) => {
  if (isDesc.value === e && props.sortTablekey == props.type) return
  isDesc.value = e
  props.handleSearch({ sort: e }, 'sort')
}
</script>

<style lang="scss" scoped>
.active-top {
  border-top-color: $primary-color !important;
}
.active-bottom {
  border-bottom-color: $primary-color !important;
}
</style>
